oa.view.rf.animatedStars = {
  problemTimeout: null,
  /**
   * Render the structure of an AnimatedStars rendering form
   *
   * @author Andrei Ionut Cosmin, Ciucardel Vasile Costinel, Gerd Wagner
   * @param {ArithmeticProblem} ap  An arithmetic problem.
   */
  render: function (ap) {
    var el = null, starEl = null;
    var starsContainer = dom.createDiv("starsContainer");
    var rB = document.getElementById("renderBox");
    var mainEl = dom.createDiv("animatedStars");
    mainEl.setAttribute("data-nmrofops", ap.type.operators.length);
    rB.appendChild( mainEl);
    document.body.appendChild( starsContainer);
    // Turn on the style for the rendering form (font colors, background, etc.)
    document.body.classList.add("stars");
    // operand 1
    if (ap.type.askedFor !== 1) {
      el = dom.createSpan("operand1","operand");
    } else {
      el = dom.createSpan("askedFor","operand");
    }
    mainEl.appendChild( el);
    // further operator-operand pairs
    for (var i=2; i <= ap.operands.length; i++) {
      // operator
      el = dom.createSpan("operator"+(i-1),"operator");
      el.innerHTML = oa.view.operatorSymbols[ ap.type.operators[i-2]-1];
      mainEl.appendChild( el);
      // operand
      if (ap.type.askedFor !== i) {
        el = dom.createSpan("operand"+i,"operand");
      } else {
        el = dom.createSpan("askedFor","operand");
      }
      mainEl.appendChild( el);
    }
    // equality symbol
    el = dom.createSpan("","equalitySymbol","=");
    mainEl.appendChild( el);
    // result
    if (ap.type.askedFor === 0) {
      el = dom.createSpan("askedFor","operand");
    }
    else {
      el = dom.createSpan("result","operand");
    }
    mainEl.appendChild( el);
    // Create five svg containers for five stars
    for (var i=0; i<=4; i++) {
      starEl = dom.createDiv("star"+(i+1), "star");
      el = document.createElementNS( SVG_NS, 'svg');
      el.setAttribute('width', '130');
      el.setAttribute('height', '100');
      starEl.appendChild( el);
      oa.view.rf.animatedStars.createStar( el);
      starsContainer.appendChild( starEl);
      // take care of IE9
      if (oa.view.IE9) { starEl.style.top = "50%";}
    }
  },
  /**
   * Create a star polygon with text content and append it to the star svg element
   * @param starSvgEl  the star svg element
   */
  createStar: function (starSvgEl) {
    var path = document.createElementNS( SVG_NS, "path");
    var textEl = document.createElementNS( SVG_NS, "text");
    var textNode = document.createTextNode( "");      
    path.setAttribute("d", "M 80.307127,86.868017 50.382061,72.462794 21.550407,88.947807 26.003235,56.03592 1.4155851,33.709536 34.092649,27.774094 47.7283,-2.5093822 63.471009,26.7342 96.485954,30.344366 73.538419,54.353336 z");
    // get the id from the parent div
    path.setAttribute("id", starSvgEl.parentNode.id + "path");
    path.setAttribute("opacity", "0.9");
    path.setAttribute("transform", "translate(1.5,5.5)");
    textEl.setAttribute("x", "50");
    textEl.setAttribute("y", "55");
    textEl.setAttribute("font-size", "16");
    textEl.setAttribute("font-family", "Calibri");
    textEl.setAttribute("text-anchor", "middle");
    textEl.appendChild( textNode);
    starSvgEl.appendChild( path);
    starSvgEl.appendChild( textEl);
  },
  /**
   * Fill an already rendered problem equation with new values for operands and result
   * 
   * @author Ciucardel Vasile Costinel & Andrei Ionut Cosmin
   * @param {ArithmeticProblem} ap  An arithmetic problem.
   */
  fill: function (ap) {
    var min=0, max=0, possibleValues=[], starElem=null, starElems=[];
    var askedForEl = document.getElementById('askedFor');
    var answer = oa.currentProblem.getCorrectAnswer();
    var starColors = new Array("#fdee01", "#fdfa01", "#eefd01", "#f0fb38", "#fff568");	
    var starValues = new Array();
    // fill in all operands
    for (var i=1; i <= ap.operands.length; i++) {
      if (ap.type.askedFor !== i) { 
        document.getElementById("operand"+i).innerHTML = ap.operands[i-1];
      }
    }
    // fill in askedFor element with question mark
    askedForEl.innerHTML = "?"; 
    // result
    if (ap.type.askedFor !== 0) { document.getElementById("result").innerHTML = ap.result; }
    // Adding values to starValues array. We will have one value equal with the answer
    // and four random values near the answer. All five values will be different.  	
    starValues[0] = answer;
    if (ap.type.numberType === NumberTypeEL.NonNegativeInteger) {
      min = Math.max( answer-5, 0); max = answer+5;
    } else {
      min = answer-5; max = answer+5;
    }
    for (var i=min; i<=max; i++) {
      possibleValues[i-min] = i;
    }
    // remove answer element
    possibleValues.splice( answer-min, 1);
    // choose 4 other possible values at random
    for (var i=1; i < 5; i++) {	
      var r = util.randomInt( 0, possibleValues.length-1);
      starValues[i] = possibleValues.splice( r, 1);
    }	
    // Shuffling the values and colors of stars, so that the correct answer 
    // will every time appear in a different position with a different color
    util.shuffle( starValues);
    util.shuffle( starColors);
    // Set the value, color and event handler of the five stars
    for (var i=0; i<=4; i++) {
      starElem = document.getElementById('star'+(i+1));
      starElem.setAttribute('onclick', 'oa.view.rf.animatedStars.starClick('+ '"'+ 'star'+(i+1) + '"' +',' + 
          starValues[i] + ')');
      // set the fill color of the star polygon
      starElem.firstChild.firstChild.setAttribute("fill", starColors[i]);
      // set the value of the text child node of the svg's text element
      starElem.firstChild.lastChild.firstChild.nodeValue = starValues[i];
    }
    starElems = document.querySelectorAll("body.stars div.star");
    for (var i=0; i < starElems.length; i++) {
      starElems[i].classList.add("animate");
      starElems[i].style.webkitAnimationPlayState = "running";
      starElems[i].style.MozAnimationPlayState = "running";
    }
    oa.view.rf.animatedStars.problemTimeout = setTimeout( oa.view.rf.animatedStars.endProblem, 15000);
  },
  /**
   * Star click event handler
   * @param starId, the clicked object transmitted as parameter
   * @param starValue, the value of the clicked star transmitted as parameter
  */  
  starClick: function (starId, starValue) { 
    var starColors = new Array("#fdee01", "#fdfa01", "#eefd01", "#f0fb38", "#fff568");
    var clickedStar = document.getElementById( starId + "path");
    var answerIsCorrect = (starValue === oa.currentProblem.getCorrectAnswer());
    var el; 
    oa.ctrl.evaluateAnswer( answerIsCorrect);
    // Restore all the star colors when we click a new star
    for (var i=1; i<=5; i++) {
      el = document.getElementById("star" + i + "path");
      el.setAttribute('fill', starColors[i-1]);
    }
    if (answerIsCorrect) {
      for (var i=1; i<=5; i++) {
        el = document.getElementById("star" + i);
        el.style.webkitAnimationPlayState = "paused";
        el.style.MozAnimationPlayState = "paused";
      }
      clickedStar.setAttribute("fill", "#2fe10b");
      el = document.getElementById('askedFor'); 
      el.innerHTML = starValue;
      clearTimeout( oa.view.rf.animatedStars.problemTimeout);
      // freeze the screen for some time
      setTimeout( oa.view.rf.animatedStars.endProblem, 3000);
    } else {
      clickedStar.setAttribute("fill", "#ff0000");
    }
  },
  /**
   * End of problem
   */  
  endProblem: function () {
    var starElems = document.querySelectorAll("body.stars div.star");
    for (var i=0; i < starElems.length; i++) {
      starElems[i].classList.remove("animate");
    }
    setTimeout( oa.ctrl.continueCurrentExercise, 100);
  },
  /**
   * Cancel the style of the rendering form (background, font colors, etc.)
   */  
  resetStyle: function () {
   // Reseting the body class of rendering form
   document.body.classList.remove("stars");
   clearTimeout( oa.view.rf.animatedStars.problemTimeout);
   // Remove the starsContainer
   var starsContainer = document.getElementById('starsContainer');     
   starsContainer.parentNode.removeChild( starsContainer);
  }
};
